<template>
    <div class='page-content'>
        <table-bar :showTop="true" :columns="columns" @changeColumn="changeColumn">
            <div slot="top" v-if="isShowSearch">
                <el-form label-width="90px">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="状态：">
                                <el-select v-model="status" style="width:100%" placeholder="请选择状态">
                                    <el-option label="待支付" value="1"></el-option>
                                    <el-option label="已支付" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-row>
                    </el-row>
                </el-form>
            </div>
            <div slot="bottom" v-if="isShowAdd">
                <el-button type="primary" plain @click="showDialog">新增</el-button>
            </div>
        </table-bar>
        <el-table :data="lists" :showPage="false" border ref="table">
            <el-table-column label="ID" width="80" prop="id" v-if="columns[0].show"/>
            <el-table-column label="订单编号" width="120" prop="order_number" v-if="columns[1].show"/>
            <el-table-column label="用户ID" width="120" prop="user_id" v-if="columns[2].show"/>
            <el-table-column label="订单金额" width="120" prop="price" v-if="columns[3].show"/>
            <el-table-column label="支付金额" width="120" prop="money_payed" v-if="columns[4].show"/>
            <el-table-column label="支付时间" width="120" prop="pay_time" v-if="columns[5].show"/>
            <el-table-column label="支付编号" width="120" prop="prepay_id" v-if="columns[6].show"/>
            <el-table-column label="手机号" width="120" prop="mobile" v-if="columns[7].show"/>
            <el-table-column label="姓名" width="120" prop="name" v-if="columns[8].show"/>
            <el-table-column label="支付方式【1-微信|2-余额】" width="120" prop="pay_type" v-if="columns[9].show"/>
            <el-table-column label="日期" width="120" prop="day" v-if="columns[10].show"/>
            <el-table-column label="卡券ID" width="120" prop="coupon_id" v-if="columns[11].show"/>
            <el-table-column label="是否核销" width="120" prop="is_write_off" v-if="columns[12].show"/>
            <el-table-column label="是否包含住宿" width="120" prop="is_contain_room" v-if="columns[13].show"/>
            <el-table-column label="类型【1-服务|2-套餐】" width="120" prop="type" v-if="columns[14].show"/>
            <el-table-column label="来源ID" width="120" prop="source_id" v-if="columns[15].show"/>
            <el-table-column label="购买产品规格名称" width="120" prop="sku_name" v-if="columns[16].show"/>
            <el-table-column label="分配住宿描述" width="120" prop="room_intro" v-if="columns[17].show"/>
            <el-table-column label="状态" width="80" prop="status" v-if="columns[18].show">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <el-tag size="mini" type="success">正常</el-tag>
                    </template>
                    <template v-else>
                        <el-tag size="mini" type="danger">禁用</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="100" prop="remark" v-if="columns[19].show"/>
            <el-table-column label="操作人" width="100" prop="admin_name" v-if="columns[20].show"/>
            <el-table-column label="创建时间" width="140" prop="create_time" v-if="columns[21].show"/>
            <el-table-column label="更新时间" width="140" prop="update_time" v-if="columns[22].show"/>
            <el-table-column fixed="right" label="操作" :width="setWidth" v-if="isShowEdit || isShowDelete">
                <template slot-scope="scope">
                    <el-button type="primary" @click="updateModel(scope.row)" v-if="isShowEdit">修改</el-button>
                    <el-button type="danger" @click="deleteModel(scope.row)" v-if="isShowDelete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template v-if="allpage>10">
            <el-pagination @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-size="10"
                            layout="total, prev, pager, next, jumper"
                            :total="allpage">
            </el-pagination>
        </template>
        <el-dialog title="编辑" width="40%" :visible.sync="dvEdit" :before-close="handleClose">
            <el-form ref="model" :model="model" label-width="80px">
                <el-form-item label="订单编号">
                    <el-input v-model="model.order_number" type="text" placeholder="请输入订单编号" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input v-model="model.user_id" type="number" placeholder="请输入用户ID" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="订单金额">
                    <el-input v-model="model.price" type="number" placeholder="请输入订单金额" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="支付金额">
                    <el-input v-model="model.money_payed" type="number" placeholder="请输入支付金额" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="支付时间">
                    <el-date-picker type="datetime" placeholder="请选择时间" format="yyyy-MM-dd HH:mm:ss"
                                                value-format="yyyy-MM-dd HH:mm:ss" suffix-icon="el-icon-date" :editable="false"
                                                v-model="model.pay_time"></el-date-picker>
                </el-form-item>
                <el-form-item label="支付编号">
                    <el-input v-model="model.prepay_id" type="text" placeholder="请输入支付编号" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="model.mobile" type="text" placeholder="请输入手机号" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="model.name" type="text" placeholder="请输入姓名" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="支付方式【1-微信|2-余额】">
                    <el-input v-model="model.pay_type" type="text" placeholder="请输入支付方式【1-微信|2-余额】" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker type="date" placeholder="请选择日期" format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd" suffix-icon="el-icon-date" :editable="false"
                                                v-model="model.day"></el-date-picker>
                </el-form-item>
                <el-form-item label="卡券ID">
                    <el-input v-model="model.coupon_id" type="number" placeholder="请输入卡券ID" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="是否核销">
                    <el-input v-model="model.is_write_off" type="text" placeholder="请输入是否核销" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="是否包含住宿">
                    <el-input v-model="model.is_contain_room" type="text" placeholder="请输入是否包含住宿" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="类型【1-服务|2-套餐】">
                    <el-input v-model="model.type" type="text" placeholder="请输入类型【1-服务|2-套餐】" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="来源ID">
                    <el-input v-model="model.source_id" type="number" placeholder="请输入来源ID" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="购买产品规格名称">
                    <el-input v-model="model.sku_name" type="text" placeholder="请输入购买产品规格名称" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="分配住宿描述">
                    <el-input v-model="model.room_intro" type="text" placeholder="请输入分配住宿描述" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="model.remark" type="text" placeholder="请输入备注" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="model.status" style="width:100%" placeholder="请选择状态">
                    <el-option label="禁用" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dvEdit = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
    import {getOrderList,editOrder,deleteOrder,getLoadButtonIsShow} from '@/api/order/orderApi';

export default {
    data() {
        return {
            lists: [],
            allpage: 1,//总页数
            showItem: 5,//分页显示得中间按钮个数
            current: 1,//当前页
            status: '',
            isShowAdd:false,
            isShowEdit:false,
            isShowDelete:false,
            isShowSearch:false,
            setWidth:0,
            model: {},
            dvEdit: false,
            columns: [
                {name: "ID", show: true},
                {name: "订单编号", show: true},
                {name: "用户ID", show: true},
                {name: "订单金额", show: true},
                {name: "支付金额", show: true},
                {name: "支付时间", show: true},
                {name: "支付编号", show: true},
                {name: "手机号", show: true},
                {name: "姓名", show: true},
                {name: "支付方式【1-微信|2-余额】", show: true},
                {name: "日期", show: true},
                {name: "卡券ID", show: true},
                {name: "是否核销", show: true},
                {name: "是否包含住宿", show: true},
                {name: "类型【1-服务|2-套餐】", show: true},
                {name: "来源ID", show: true},
                {name: "购买产品规格名称", show: true},
                {name: "分配住宿描述", show: true},
                {name: "状态", show: true},
                {name: "备注", show: true},
                {name: "操作人", show: true},
                {name: "创建时间", show: true},
                {name: "更新时间", show: true},
            ],
        };
    },
    created: function () {
        this.loadButtonAuth();
        this.handleCurrentChange(1);
    },
    methods: {
        loadButtonAuth: function () {
            getLoadButtonIsShow({
                path: this.$route.path,
            }).then(res => {
                this.isShowAdd = res.data.isShowAdd;
                this.isShowEdit = res.data.isShowEdit;
                this.isShowDelete = res.data.isShowDelete;
                this.isShowSearch = res.data.isShowSearch;
                this.isShowExport = res.data.isShowExport;
                this.setWidth = res.data.setWidth;
            })
        },
        handleCurrentChange: function (index) {
            this.current = index;
            getOrderList({
                page: index,
                status: this.status,
            }).then(res => {
                this.lists = res.data.lists;
                this.allpage = res.data.allpage;
            })
        },
        showDialog: function () {
            this.model = {};
            this.dvEdit = true;
        },
        updateModel: function (row) {
            this.model = row;
            this.dvEdit = true;
        },
        reset: function () {
            this.status = '';
        },
        search: function () {
            this.handleCurrentChange(1);
        },
        handleClose: function (done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                    .catch(_ => {
                });
        },
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout()
        },
        onSubmit: function () {
            editOrder({
                id: this.model.id,
                remark: this.model.remark,
                status: this.model.status,
                order_number: this.model.order_number,
                user_id: this.model.user_id,
                price: this.model.price,
                money_payed: this.model.money_payed,
                pay_time: this.model.pay_time,
                prepay_id: this.model.prepay_id,
                mobile: this.model.mobile,
                name: this.model.name,
                pay_type: this.model.pay_type,
                day: this.model.day,
                coupon_id: this.model.coupon_id,
                is_write_off: this.model.is_write_off,
                is_contain_room: this.model.is_contain_room,
                type: this.model.type,
                source_id: this.model.source_id,
                sku_name: this.model.sku_name,
                room_intro: this.model.room_intro,
            }).then(res => {
                if (res.code === 1) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.dvEdit = false;
                    this.handleCurrentChange(this.current);
                }
            })
        },
       deleteModel: function (row) {
            this.$confirm("您确认要删除该条数据?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                deleteOrder({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
    },
}
</script>

<style lang='scss' scoped>
.page-content {
    width: 100%;
    height: 100%;
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}

</style>

